<template>
  <div class="tabar" v-show="isShowTabbar">
    <div class="tab_item" v-for="(item,index) in tab" :key="index" @click="switchToTab(item.path)">
      <img :src="$route.path === item.path ? item.active:item.normal" alt="">
      <span :class="$route.path === item.path ? 'active': '' ">{{item.title}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tabar',
  data () {
    return {
      tab:[
        {
          path:'/home',
          normal:require('@/assets/tab_home.png'),
          active:require('@/assets/tab_home1.png'),
          title:'主页'
        },
        {
          path:'/message',
          normal:require('@/assets/tab_msg.png'),
          active:require('@/assets/tab_msg1.png'),
          title:'信息'
        },
        {
          path:'/user',
          normal:require('@/assets/tab_me.png'),
          active:require('@/assets/tab_me1.png'),
          title:'个人中心'
        }
      ]
    }
  },
  computed: {
    isShowTabbar(){
      let routeLength = this.$route.path.split("/").length;
      return routeLength > 2 ? false : true;
    }
  },
  methods: {
    switchToTab(path){
      this.$router.replace(path);
    }
  },

}
</script>

<style lang="less" scoped>
.tabar{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background: #fff;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-between;
  .tab_item{
    display: flex;
    flex: 1;
    align-items: center;
    flex-direction: column;
    padding: 4px 0;
    color: rgb(77, 85, 93);
    font-size: 12px;
    img{
      display: block;
      width: 30px;
      height: 30px;
      margin-bottom: 4px;
    }
    .active{color: #ff6400;}
  }
}
</style>
